/* eslint-disable react-hooks/rules-of-hooks */
import React, { useState } from 'react';
import { Button, Form, Input } from 'antd';
import './forgotpassword.css';
const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
    localStorage.setItem('dataKey', JSON.stringify(values));
};

function forgotpassword() {
    const [scaleData, setscaleData] = useState(false);
    return (
        <div className='allBox'>
            <div className='formBox'>
                <div className='ztBox'>找回密码</div>
                <div className='zbdBox'>
                    <Form name='normal_login' className='login-form' initialValues={{ remember: true }} onFinish={onFinish}>
                        <Form.Item
                            name='phone'
                            rules={[
                                {
                                    required: true,
                                    message: '请输入手机号'
                                },
                                {
                                    validator: (rule, value) => {
                                        const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
                                        if (!reg.test(value)) {
                                            setscaleData(false);
                                            return Promise.reject('手机号码格式不正确');
                                        } else {
                                            setscaleData(true);

                                            return Promise.resolve();
                                        }
                                    }
                                }
                            ]}
                        >
                            <Input placeholder='请输入手机号！' />
                        </Form.Item>
                        <Form.Item name='password' rules={[{ required: true, pattern: /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/, message: '格式不正确,' }]}>
                            <Input.Password placeholder='请输入新密码！' />
                        </Form.Item>
                        <Form.Item name='验证码' rules={[{ required: true, message: '验证码不正确', pattern: /^\d{6}$/ }]}>
                            <div className='yzan'>
                                <Input placeholder='请输入验证码！' />
                                {scaleData == true ? (
                                    <Button type='primary'>获取验证码</Button>
                                ) : (
                                    <Button type='primary' disabled>
                                        获取验证码
                                    </Button>
                                )}
                            </div>
                        </Form.Item>
                        <Form.Item>
                            <Button type='primary' htmlType='submit' style={{ width: '100%' }}>
                                登录
                            </Button>
                        </Form.Item>
                        <Form.Item>
                            <div className='mmzcBox'>
                                <a className='login-form-forgot' href='/#/login'>
                                    立刻登录
                                </a>

                                <div className='zcBox'>
                                    <div>没有账号?</div>
                                    <a className='login-form-forgot' href='/#/register'>
                                        快速注册
                                    </a>
                                </div>
                            </div>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </div>
    );
}

export default forgotpassword;
